var imei = localStorage.mdtid;
var height = $(document.body).height()+"px";
//用react封装
var currentpage = 1,totlepage = 1,i,boxOrdevice="device",onPageLeft = 0,onPageRight = 0;//分页的当前页和总的页数
var tableData = [];
//表单的当前第几页、总页数、总行数
var otherData = {currentpage:1,totlepage:10,totlerows:0,pageLeft:0,pageRight:1};
var ContentBody=React.createClass({
    getInitialState: function () {
        return {otherData:this.props.otherData,tableData:this.props.tableData}
    },
    componentDidMount: function () {
        tableData = [];
        var svar = this;
        if(imei != "undefined" && imei != undefined){
            var param="param={";
            param = getJsonDataNotEmpty(param,"imei",'"'+imei+'"');
            param = getJsonDataNotEmpty(param,"pagenumber","1");
            param = getJsonDataNotEmpty(param,"pagecount",pagecount+'');
            param += "}";
            suixun.ajax(serverUrl+'/deviceManage/queryDeviceHistory.json',param,"get",function(data){
                setTimeout(function () {
                    suixun.hideLoding();//隐藏加载中
                },500);
                if(data.code == 200){
                    for(var i=0;i<data.info.queryresult.length;i++){
                        var obj=data.info.queryresult[i];
                        tableData[i] = {operation:obj.operation,operationername:obj.operationername,mdtid:obj.mdtid,addtime:obj.addtimestring};
                    }
                    var pageRight = 0;
                    if(data.info.totlepage > 1 && data.info.totlepage > currentpage){
                        pageRight = 1
                    }
                    otherData = {pageLeft:0,pageRight:pageRight};
                    currentpage = 1;totlepage = data.info.totlepage;//初始化的时候赋值：分页的当前页和总的页数
                    svar.setState({tableData:tableData,otherData:otherData});
                }
            });
        }else{
            setTimeout(function () {
                suixun.hideLoding();//隐藏加载中
            },500);
            otherData = {pageLeft:0,pageRight:0};
            currentpage = 1;totlepage = 1;//初始化的时候赋值：分页的当前页和总的页数
            this.setState({tableData:tableData,otherData:otherData});
        }

    },
    onPageClick: function (num) {
        //分页-调用ajac然后把数据查询出来:获取name的值
        //计算currentpage
        suixun.showLoding();//显示加载中
        var onPageLeft = 0,onPageRight = 1,svar = this;
        if(num > 0){
            currentpage = num;
        }else if(num == -1 && currentpage > 1){
            currentpage --;
        }else if(num == -2  && currentpage < totlepage){
            currentpage ++;
        }else{
            return;
        }
        //修改左右的按钮
        if((currentpage == totlepage && totlepage == 1)|| totlepage == 0){
            onPageLeft = 0;
            onPageRight = 0;
        }else if(currentpage == totlepage && totlepage > 1){
            onPageLeft = 1;
            onPageRight = 0;
        }else if(1 < currentpage && currentpage < totlepage){
            onPageLeft = 1;
            onPageRight = 1;
        }
        var param="param={";
        param = getJsonDataNotEmpty(param,"imei",""+imei+"");
        param = getJsonDataNotEmpty(param,"pagenumber",""+currentpage+"");
        param = getJsonDataNotEmpty(param,"pagecount",pagecount+'');
        param += "}";
        suixun.ajax(serverUrl+'/deviceManage/queryDeviceHistory.json',param,"get",function(data){
            tableData = [];
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200){
                for(var i=0;i<data.info.queryresult.length;i++){
                    var obj=data.info.queryresult[i];
                    tableData[i] = {operation:obj.operation,operationername:obj.operationername,mdtid:obj.mdtid,addtime:obj.addtimestring,oldvalue:obj.oldvalue,newvalue:obj.newvalue};
                }
                if(data.info.totlepage > 1 && data.info.totlepage > currentpage){
                    pageRight = 1
                }
                otherData = {pageLeft:onPageLeft,pageRight:onPageRight};
                totlepage = data.info.totlepage;//初始化的时候赋值：分页的当前页和总的页数
                svar.setState({tableData:tableData,otherData:otherData});
            }
        });
    },
    render:function () {
        return(
            <div className="tableManage-body">
                <ContentBodyHead/>
                <ContentBodyText tableData={this.state.tableData} />
                <div className="tableInfo">
                    <Page otherData={this.state.otherData} onPageClick={this.onPageClick}/>
                </div>
                <footer id="copyright">
                    <span><img src="../img/icon/copyright.png"/>{copyright}</span>
                </footer>
            </div>
        );
    }
});
/**
 * 修改记录列表
 * @type {*}
 */
var TableSchool = React.createClass({
    render: function () {
        return (
            <div className="content-body-text-inner">
                <div className="content-body-text-inner-div">
                    <span className="content-body-text-inner-div-span">
                        <img src="../img/icon/parentHeadImg.png" alt=""/>
                    </span>
                    <div className="content-body-text-inner-div-main">
                        <div className="content-body-text-inner-div-inner">
                            <span className="content-body-text-inner-div-title">{this.props.operationername}</span>
                            <span className="content-body-text-inner-div-time">
                                <img src="../img/icon/grayTime.png" alt=""/>&nbsp;
                                <span>{this.props.addtime}</span>
                            </span>
                        </div>
                        <div className="content-body-text-inner-div-content">{this.props.operation}</div>
                    </div>
                </div>
            </div>
        );
    }
});
var ContentBodyHead=React.createClass({
    goback:function(){
        localStorage.mdtid = imei;
        window.location.href = serverUrl+'/deviceManage/deviceInfo.html';
    },
    render:function () {
        return(
            <div className="content-body-head">
                <div className="content-body-head-inner">
                    <span className="content-body-head-inner-left">设备操作记录</span>
                    <span className="content-body-head-inner-right" onClick={this.goback}>
                        <img src="../img/icon/fanhui.png" alt=""/>
                        <span >返回</span>
                    </span>
                </div>
            </div>
        );
    }
});
var ContentBodyText=React.createClass({
    render:function () {
        {
            var Tabels = this.props.tableData.map(function (data,index) {
                return (
                    <TableSchool key={index} operationername={data.operationername} addtime={data.addtime} operation={data.operation} oldvalue={data.oldvalue} newvalue={data.newvalue} />
                )
            })
        }
        return(
            <div>
                <div className="content-body-text">
                    {this.props.tableData==""?'':Tabels}
                </div>
                {this.props.tableData==""?<div className="tableNoDatMsg">{tableNoDataCount}</div>:''}
            </div>
        );
    }
});
//分页组件开始
var Page = React.createClass({
    setPage: function (e) {
        setPage($(e.target).html());
        this.props.onPageClick(1);
    },
    showPage: function () {
        showPage();
    },
    render: function () {
        {
            var items = [],
                svar = this,
                otherData=this.props.otherData;
            if(totlepage == 0 ){
                items.push({num:1,checked:true})
            }else if(totlepage < 6){
                for(var i = 1;i <= totlepage ;i++) {
                    if (i == currentpage) {
                        items.push({num:i,checked:true})
                    } else {
                        items.push({num:i,checked:false})
                    }
                }
            }else if(currentpage >= (totlepage-2)) {//点在左边
                items.push({num:1,checked:false});
                items.push({num:'···',checked:false});
                for(i = totlepage-1;i <= totlepage ;i++){
                    if(i == currentpage){
                        items.push({num:i,checked:true})
                    }else{
                        items.push({num:i,checked:false})
                    }
                }
            }else if(currentpage <= 3){
                for(i = 1;i <= 3 ;i++) {
                    if (i == currentpage) {
                        items.push({num:i,checked:true})
                    } else {
                        items.push({num:i,checked:false})
                    }
                }
                items.push({num:'···',checked:false});
                items.push({num:totlepage,checked:false})
            }else {//点在两边
                items.push({num:1,checked:false});
                items.push({num:'···',checked:false});
                items.push({num:currentpage-1,checked:false});
                items.push({num:currentpage,checked:true});
                items.push({num:currentpage+1,checked:false});
                items.push({num:'···',checked:false});
                items.push({num:totlepage,checked:false})
            }
        }
        return (
            <div className="tableInfo-page">
                <div className="page-number">每页<span className="page-number-list" onClick={this.showPage}>{pagecount}</span>条</div>
                <div className="page-list" style={{top:pageListTop+"px"}}>
                    <ul>
                        {
                            pageList.map(function (item) {
                                return (<li onClick={svar.setPage}>{item}</li>)
                            })
                        }
                    </ul>
                </div>
                <div className="page-limit">
                    <ol className="page-limit-ol">
                        <ol className="page-limit-ol">
                            <li className="page-limit-img" name="-1" onClick={otherData.pageLeft == 0?'':svar.props.onPageClick.bind(svar,-1)} ><span className={otherData.pageLeft == 0?'page-limit-left-no':'page-limit-left-yes'}/></li>
                            {
                                items.map(function (item) {
                                    return (<li onClick={isNaN(item.num)?'':svar.props.onPageClick.bind(svar,item.num)}  className={item.checked == true?'page-limit-num page-limit-checked':'page-limit-num'} name={item.num}>{item.num}</li>)
                                })
                            }
                            <li className="page-limit-img" name="-2" onClick={otherData.pageRight == 0?'':svar.props.onPageClick.bind(svar,-2)} ><span className={otherData.pageRight == 0?'page-limit-right-no':'page-limit-right-yes'}/></li>
                        </ol>
                    </ol>
                </div>
            </div>
        );
    }
});//分页组件结束
ReactDOM.render(<ContentBody  tableData={tableData} otherData={otherData} />,document.getElementById('contentmanage'));/**
 * Created by xxx on 2017/3/27.
 */
